<template>
  <div class="q-pa-md">
    <div class="q-gutter-md row items-start">
      <t-select
        filled
        v-model="model"
        use-chips
        label="Lazy load opts"
        :options="options"
        @filter="filterFn"
        @filter-abort="abortFilterFn"
        style="width: 250px"
      >
        <template v-slot:no-option>
          <t-item>
            <t-item-section class="text-grey"> No results </t-item-section>
          </t-item>
        </template>
      </t-select>

      <t-btn
        v-if="options"
        label="Reset"
        color="primary"
        @click="options = null"
      />
    </div>
  </div>
</template>

<script>
  import { ref } from 'vue';

  const stringOptions = ['Google', 'Facebook', 'Twitter', 'Apple', 'Oracle'];

  export default {
    setup() {
      const options = ref(null);

      return {
        model: ref(null),
        options,

        filterFn(val, update, abort) {
          if (options.value !== null) {
            // already loaded
            update();
            return;
          }

          setTimeout(() => {
            update(() => {
              options.value = stringOptions;
            });
          }, 2000);
        },

        abortFilterFn() {
          // console.log('delayed filter aborted')
        },
      };
    },
  };
</script>
